.varela-round-regular {
   /* font-family: "Varela Round", sans-serif; */
   font-weight: 1000;
   font-size: 44px;
   font-style: normal;
   color: #0075fe;
   border-width: 4px;
   border-color: aliceblue;
   border-radius: 4px;
   /* -webkit-text-stroke-width: 0.1px; */
   /* -webkit-text-stroke-color: white; */
   text-shadow: 5px 4px 10px #000000;
}

.titulo-jogo-memoria {
   z-index: 2;
   display: flex;
   position: relative;
   justify-content: center;
   margin-bottom: 30px;
   text-align: center;
   /* -webkit-text-stroke-width: 1.4px; */
   /* --text-stroke-size: 1px;
   --text-stroke-color: #fb1a1a; */
   /* border-color: coral; */
   line-height: 40px;
   text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.205);
   color: #0075FE;
   -webkit-text-stroke-color: white;
   transform: rotate(-2deg);

}

.titulo-jogo-memoria-borda {
   z-index: 1;
   display: flex;
   position: absolute;
   justify-content: center;
   margin-bottom: 30px;
   text-align: center;
   -webkit-text-stroke-width: 9.4px;
   /* --text-stroke-size: 1px;
   --text-stroke-color: #fb1a1a; */
   /* border-color: coral; */
   line-height: 40px;
   text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.205);
   color: #0075FE;
   -webkit-text-stroke-color: white;
   transform: rotate(-2deg);

}

.font-com-borda {
   position: relative;
   display: flex;
   justify-content: center;
}

body {
   background-color: #3A7830;
}

.grid {
   display: grid;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   grid-template-rows: repeat(4, minmax(auto, 1fr));
   gap: 16px;
   /* width: 100%;
   max-width: 550px; */
   height: 100%;
   margin: 0 5%;
   justify-content: space-between;
   width: 86%;

}

.card {
   aspect-ratio: 1/1;
   width: 25%;
   /* height: 200px; */
   /* background-color: #f44646; */
   border-radius: 22px;
   box-shadow: 0px 3px 14px #00000017;
   position: relative;
   transition: all 400ms ease;
   transform-style: preserve-3d;

}

.revela-carta {
   transform: rotateY(180deg);
}

.desrevela-carta {
   transform: rotateY(30deg);
}

/* 
.card:hover {
   transform: rotateY(180deg);
} */

.face {
   width: 31%;
   /* height: auto; */
   position: absolute;
}

.tamanho-carta {

   aspect-ratio: 1/1;
   /* width: 150px; */
   /* height: 33vh; */
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   flex-wrap: nowrap;

}


.frente-carta {
   background-image: url("../images/jogo_da_memoria/verso.jpg");
   background-size: cover;
   background-position: center;
   backface-visibility: hidden;
   background-size: 105%;
}

/* .frente-carta:hover {
   transform: rotateY(180deg);
} */

.verso-carta {
   background-image: url("../images/jogo_da_memoria/abacaxi.jpg");
   background-size: cover;
   background-position: center;
   backface-visibility: hidden;
}

/* .verso-carta:hover {
   transform: rotateY(180deg);
} */

#div_block_fundo {
   background-color: #195e1d87;
}

.cartacerta-z-index {

   z-index: 20;
}

#gameOver {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#restart {
   font-weight: 800;
   font-size: 20px;
   border: 0;
   border-radius: 32px;
   background-color: chocolate;
   color: #ffffff;
   padding: 16px;
   padding-left: 32px;
   padding-right: 32px;
   margin-top: 24px;
   margin-bottom: 165px;
}

#restart:hover {

   border: 0;
   border-radius: 32px;
   background-color: rgb(255, 118, 20);
   color: #ffffff;
   padding: 16px;
   padding-left: 32px;
   padding-right: 32px;
   margin-top: 24px;
   transition: all 400ms ease-in-out;
   transform: scale(1.05);
}

#restart:active {

   border: 0;
   border-radius: 32px;
   background-color: rgb(255, 220, 22);
   color: #ffffff;
   padding: 16px;
   padding-left: 32px;
   padding-right: 32px;
   margin-top: 24px;
   transition: all 100ms ease;
   transform: scale(1.05);
}

#texto-centrado {
   display: flex;
   text-align: center;
   width: 68%;
   flex-direction: column;
   align-items: center;
}

.quadrado-jogo-da-meoria {
   width: 420px;
   height: 420px;
   z-index: -1;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.linha-1-anima {
   width: 250px;
   margin-bottom: 15px;
   /* background-color: blueviolet; */
   height: 38px;
}